<template>
	<view class="navigation-container" :style="{height: navBarHeight + 'px'}">
		<view class="status-bar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<view class="search-part" :style="{
			marginTop: res.top-statusBarHeight + 'px',
			height: res.height+'px',
			backgroundSize:res.height+'px ' +res.height+'px',
			lineHeight:res.height+'px'
		}" style="color: white;">
			{{info}}
		</view>		
		<image src="../static/back.png" class="navigationBack" mode="heightFix" :style="{
			height: (res.height-5)+'px'
		}" @click="goBack"></image>
	</view>
</template>

<script>
import { onBeforeMount, toRefs } from "vue";
	export default {
		name:"fruitNavigationBar",
		props:{
		    info:{
		        type:String,
		        default:""
		    }
		},
		setup(props,context){
			let statusBarHeight = 0;
			statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			let res=wx.getMenuButtonBoundingClientRect();
			let navBarHeight = statusBarHeight+res.height+10;
			const {info} = toRefs(props)
			
			function goBack(){
				uni.navigateBack({
					delta:1
				})
			}
			
			return {
				statusBarHeight,
				navBarHeight,
				res,
				goBack,
				info
			}
		}
	}
</script>
	
<style scoped>
	.navigation-container{
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: #9BCDD2;
		width: 100%;
		text-align: center;
	}
	
	.navigationBack{
		position: absolute;
		bottom: 20rpx;
		left: 15rpx;
	}
</style>